<template>
	<view class="person_feedback_need">
		<view class="need_main">
			<view class="title">请选择您要反馈的问题类型</view>
			<view class="nav">
				<text :class="listIndex==index?'active':''" v-for="(item,index) in list" :key="index" @click="navBtn(index)">{{item}}</text>
			</view>
			<view class="text">
				<view class="txt">
					<u-input v-model="value" type="textarea" height='300' :clearable='false' placeholder='有什么可以帮您？' />
				</view>
				<view class="img_list">
					<view class="img" v-for="(item,index) in imgList" :key="index">
						<image class="image" :src="item" mode="aspectFill"></image>
						<view class="icon" @click="delImgBtn(index)">
							<u-icon name="close-circle-fill" color="#f55800" size="40"></u-icon>
						</view>
					</view>
					<view class="img" @click="upImgBtn" v-if="imgList.length<4">
						<image class="image" src="@/static/images/upImg.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<BottomBtn title='提交' @submit='submitBtn'></BottomBtn>
	</view>
</template>

<script>
	import BottomBtn from '@/components/bottom_btn/bottom_btn.vue';
	export default {
		components:{
			BottomBtn
		},
		data() {
			return {
				listIndex:0,
				list:['使用问题','服务问题','数据修正'],
				value:'',
				imgList:[],
				imgList_o:[],
			};
		},
		onLoad() {
			this.feedNav()
		},
		methods:{
			feedNav(){
				var that = this
				that.$tips.showLoading('加载中')
				that.$httpApi.feedbacktype().then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.list=res.data
					}
				})
			},
			// 切换
			navBtn(index){
				this.listIndex=index
			},
			// 上传图片
			upImgBtn(){
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.$tips.showLoading('上传中')
						const uploadTask = uni.uploadFile({
							url: that.$baseVal.baseUrl+'/api/Common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')
							},
							formData: {
								'type':'feedback'
							},
							success: function(uploadFileRes) {
								that.$tips.hideLoading()
								var res = JSON.parse(uploadFileRes.data)
								if(res.code==1){
									that.imgList=that.imgList.concat(res.data.fullurl)
									that.imgList_o=that.imgList_o.concat(res.data.url)
								}
							}
						});
					},
					error: function(e) {
						// console.log(e);
					}
				})
			},
			// 删除
			delImgBtn(index){
				this.imgList.splice(index,1)
				this.imgList_o.splice(index,1)
			},
			// 底部按钮
			submitBtn(){
				var that = this
				if(that.value==''){
					that.$tips.showToast('请输入您要反馈的问题')
					return
				}else{
					that.$tips.showLoading('提交中')
					var params = {
						type:that.list[that.listIndex],
						content:that.value,
						image:that.imgList_o.join(','),
					}
					that.$httpApi.userfeedbackAdd(params).then((res)=>{
						that.$tips.hideLoading()
						if(res.code==1){
							that.$tips.showToast('提交成功')
							setTimeout(function(){
								uni.navigateBack()
							},2000)
						}
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.person_feedback_need{
		width: 100%;
		padding-top: 24rpx;
		.need_main{
			width: 100%;
			padding: 40rpx 32rpx;
			background: #fff;
			.title{
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			.nav{
				width: 100%;
				padding-top: 10rpx;
				padding-bottom: 50rpx;
				display: flex;
				flex-wrap: wrap;
				text{
					display: block;
					padding: 0 40rpx;
					margin-top: 20rpx;
					margin-right: 20rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					background: #F7F8FA;
					border-radius: 40px;
				}
				.active{
					color: #fff;
					background: #26C281;
				}
			}
			.text{
				width: 100%;
				padding: 15rpx;
				background: #F7F8FA;
				border-radius: 16rpx;
				.txt{
					width: 100%;
					padding: 0 10rpx;
				}
				.img_list{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					.img{
						position: relative;
						width: 160rpx;
						height: 160rpx;
						margin-right: 6rpx;
						margin-top: 6rpx;
						.image{
							display: block;
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
						.icon{
							position: absolute;
							top: 0;
							right: 0;
							width: 50rpx;
							height: 50rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					.img:nth-child(4n){
						margin-right: 0;
					}
				}
			}
		}
	}
</style>
